<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">

<input id="cyberDownloadButton" onclick="fun();" type="button" value="点击">
<img id="cyberDownloadImg"/>

<div id="container" style="height: 50% ; width: 50%"></div>
</body>

<!--<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>-->
<!--<script type="text/javascript" src='file://C:/kk/sakura/study-record/reptlie-heml-unit/src/main/java/top/hekun/study/echarts.min.js'></script>-->
<script src='file://C:/kk/sakura/study-record/reptlie-heml-unit/src/main/java/top/hekun/study/410echarts.min.js'
        type="text/javascript"></script>

<script type="text/javascript">
    function fun() {
        const imgBase64Url = this.myChart.getDataURL({
            type: "png",
            pixelRatio: 1,
            backgroundColor: '#fff'
        })
        document.body.removeChild(document.getElementById('cyberDownloadImg'));
        document.body.removeChild(document.getElementById('cyberDownloadButton'));
        document.body.removeChild(document.getElementById('container'));
        let div = document.createElement('div')
        div.innerHTML = imgBase64Url
        div.id = "divBase64"
        document.body.appendChild(div)
        console.log(imgBase64Url)

        // var dom = document.getElementById('cyberDownloadImg');
        // dom.src=imgBase64Url
        // var arr = imgBase64Url.split(',')
        // var bstr = arr[1]
        // console.log(bstr)


        // bstr = atob(arr[1]),
        // n = bstr.length,
        // u8arr = new Uint8Array(n);
        // while (n--) {
        //     u8arr[n] = bstr.charCodeAt(n);
        // }
        // this.download('降温预测时序图', imgBase64Url);
    }

    function download(filename, imgBase64Url) {
        let a = document.createElement('a')
        a.download = filename
        // a.href = "http://127.0.0.1/filename.png"
        // 字符内容转变成blob地址
        let blob = new Blob([imgBase64Url])
        a.href = URL.createObjectURL(blob);
        a.style.opacity = '0'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
    }

    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        title: {
            text: 'Temperature Change in the Coming Week'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {},

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} °C'
            }
        },
        series: [
            {
                name: 'Highest',
                type: 'line',
                data: [10, 11, 13, 11, 12, 12, 9],
                markPoint: {
                    data: [
                        {type: 'max', name: 'Max'},
                        {type: 'min', name: 'Min'}
                    ]
                },
                markLine: {
                    data: [{type: 'average', name: 'Avg'}]
                }
            },
            {
                name: 'Lowest',
                type: 'line',
                data: [1, -2, 2, 5, 3, 2, 0],
                markPoint: {
                    data: [{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}]
                },
                markLine: {
                    data: [
                        {type: 'average', name: 'Avg'},
                        [
                            {
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            },
                            {
                                symbol: 'circle',
                                label: {
                                    position: 'start',
                                    formatter: 'Max'
                                },
                                type: 'max',
                                name: '最高点'
                            }
                        ]
                    ]
                }
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>

</html>